<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-30 11:31:10
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:35:52
-->
<template>
  <div>
    <el-dialog
      title="设置考场"
      :visible.sync="dialog.setExaRoomShow"
      width="60%"
      @close="exaRoomClose"
      v-loading="loading"
    >
      <el-form
        :model="examForm"
        ref="examForm"
        :rules="examRules"
        label-width="100px"
        v-if="dialog.setExaRoomShow"
      >
        <div class="accountExam">
          <el-form-item label="准考证号">
            <el-input
              v-model="examForm.admissionTicket"
              placeholder="请填写准考证号"
              style="width: 500px"
            ></el-input>
          </el-form-item>
        </div>

        <div class="basics" style="margin-bottom: 10px">理论考试</div>
        <div class="examSpecific">
          <el-form-item label="考试开始时间">
            <el-date-picker
              v-model="examForm.theoryStartTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考试结束时间">
            <el-date-picker
              v-model="examForm.theoryEndTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考试地点">
            <el-input
              v-model="examForm.theoryAddress"
              placeholder="请填写考试地点"
            ></el-input>
          </el-form-item>
          <el-form-item label="考场">
            <el-input
              v-model="examForm.theoryRoom"
              placeholder="请填写考场"
            ></el-input>
          </el-form-item>
        </div>
        <div class="basics" style="margin-bottom: 10px">实操考试</div>
        <div class="examSpecific">
          <el-form-item label="考试开始时间">
            <el-date-picker
              v-model="examForm.operationalStartTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考试结束时间">
            <el-date-picker
              v-model="examForm.operationalEndTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考试地点">
            <el-input
              v-model="examForm.operationalAddress"
              placeholder="请填写考试地点"
            ></el-input>
          </el-form-item>
          <el-form-item label="考场">
            <el-input
              v-model="examForm.operationalRoom"
              placeholder="请填写考场"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input
              v-model="examForm.contacts"
              placeholder="请填写联系人"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input
              v-model="examForm.contactInfo"
              placeholder="请填写联系方式"
            ></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="注意事项">
            <el-input
              v-model="examForm.note"
              placeholder="请填写注意事项"
              type="textarea"
              :rows="4"
              style="width: 90%"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer">
        <el-button @click="dialog.setExaRoomShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setExamRoom } from "@/api/exam.js";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      examForm: {
        examArrangeId: "",
        examRoomId: "",
        admissionTicket: "",
        theoryStartTime: "",
        theoryEndTime: "",
        theoryAddress: "",
        theoryRoom: "",
        operationalStartTime: "",
        operationalEndTime: "",
        operationalAddress: "",
        operationalRoom: "",
        contacts: "",
        contactInfo: "",
        note: "",
      },
      examRules: {
        contacts: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    exaRoomClose() {
      this.examForm.examArrangeId = "";
      this.examForm.admissionTicket = "";
      this.examForm.theoryStartTime = "";
      this.examForm.theoryEndTime = "";
      this.examForm.theoryAddress = "";
      this.examForm.theoryRoom = "";
      this.examForm.operationalStartTime = "";
      this.examForm.operationalEndTime = "";
      this.examForm.operationalAddress = "";
      this.examForm.operationalRoom = "";
      this.examForm.contacts = "";
      this.examForm.contactInfo = "";
      this.examForm.note = "";
    },
    onSubmit() {
      this.examForm.examArrangeId = this.drawerData.id;
      this.examForm.examRoomId = this.drawerData.examRoomId;
      this.$refs.examForm.validate((valid) => {
        if (!valid) return;
        this.loading = true;
        setExamRoom(this.examForm).then((res) => {
          if (res.code !== 200) {
            this.loading = false;
          } else {
            this.loading = false;
            this.$parent.getList();
            this.$message.success(res.msg);
            this.dialog.setExaRoomShow = false;
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}

.examSpecific {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
    /deep/ .el-input__inner {
      width: 330px;
    }
  }
}
</style>